<template>
  <back-ground />
  <div class="container">
    <div class="row1">
      <el-row :gutter="0" class="row1-row">
        <el-col :span="24" :offset="0">
          <el-progress type="dashboard" :percentage="albumView.usePercent" :stroke-width="15"
            :width="150" :color="colors">
            <template #default="{ percentage }">
              <span class="percentage-value">{{ percentage }}%</span>
              <span class="percentage-label">{{albumView.useRom}}/{{albumView.totalRom}}</span>
            </template>
          </el-progress>
        </el-col>
      </el-row>
      <el-row :gutter="0" class="row1-new">
        <el-col :span="24" :offset="0">
          <el-button v-show="!isPick" @click="addNewRom ()" type="danger" size="large">新用户领取2G免费空间！
          </el-button>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="24" :offset="0">
          <div class="row1-card">
            <el-row :gutter="0">
              <el-col :span="8" :offset="0">
                <div>相册</div>
                <div>{{albumView.albumNum}}</div>
              </el-col>
              <el-col :span="8" :offset="0">
                <div>图片</div>
                <div>{{albumView.photoNum}}</div>
              </el-col>
              <el-col :span="8" :offset="0">
                <div>共享</div>
                <div>{{albumView.shareUserNum}}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="row2">
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <div class="photobutton" @click="toAlbum">
            <img :src="photoImage" class="image">
          </div>
        </el-col>
        <el-col :span="12" :offset="0" @click="toAlbumShare">
          <div class="photobutton">
            <img :src="photoShareImage" class="image">
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">我的相册</el-col>
        <el-col :span="12" :offset="0">共享相册</el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <div class="photobutton" @click="$router.push('/albumdetect')">
            <img :src="detectImage" class="image">
          </div>
        </el-col>
        <!-- <el-col :span="12" :offset="0" @click="toAlbumShare">
          <div class="photobutton">
            <img :src="photoShareImage" class="image">
          </div>
        </el-col> -->
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">智能分类</el-col>
        <!-- <el-col :span="12" :offset="0">共享相册</el-col> -->
      </el-row>
    </div>
    <div class="photo-rb" @click="toPhotoRb">
      回收站
      <el-icon :size="15">
        <delete />
      </el-icon>
    </div>
  </div>
</template>

<script>
import photoImage from '../../assets/imge/album/photo.png';
import detectImage from '../../assets/imge/album/detectalbum.png'
import photoShareImage from '../../assets/imge/album/sharephoto.png';
import { ElMessage } from 'element-plus';
import { sizeFormat } from "../../utils/index";
export default {
  name: 'AGView',
  data () {
    return {
      photoImage,
      photoShareImage,
      detectImage,
      styleobj: {
        fontSize: '30px',
        color: 'red'
      },
      show: true,
      colors: [
        { color: '#4BD80C', percentage: 20 },
        { color: '#E1F70D', percentage: 40 },
        { color: '#F7CF0D', percentage: 60 },
        { color: '#F18411', percentage: 80 },
        { color: '#E40505', percentage: 100 }
      ],
      albumView: {
        "useSpaceDelete": "0",
        "useRom": "0",
        "albumNum": 0,
        "usePercent": "0",
        "useSpace": "0",
        "totalRom": "0",
        "photoNum": 0,
        "shareUserNum": "0",
      },
      isPick: true,
    }
  },
  mounted () {
    this.getAlbumView();
    this.getNewRom();
  },
  methods: {
    toAlbum () {
      this.$router.push("/album");
    },
    toAlbumShare () {
      this.$router.push("/albumshare");
    },
    toPhotoRb () {
      this.$router.push("/photorb");
    },
    getAlbumView () {
      this.$axios.get("/album/albumview").then((res) => {
        if (res.flag) {
          this.albumView = res.data;
          this.albumView.useRom = sizeFormat(this.albumView.useRom);
          this.albumView.totalRom = sizeFormat(this.albumView.totalRom);
        }
      })
    },
    //查看新用户存储空间
    getNewRom () {
      //查看是否已获取
      this.$axios.get("/rom/ispick/1").then(res => {
        if (res.flag) {
          //还未领取
          if (res.data == false) {
            this.isPick = false;
          }
        }
      })
    },
    //并领取
    addNewRom () {
      this.$axios.get("/rom/001").then(res => {
        if (res.flag) {
          ElMessage({
            message: "领取成功",
            grouping: true,
            type: 'success',
            duration: 2000,
          })
          this.isPick = true;
          this.getAlbumView();
        }
      })
    }
  },
}
</script>

<style scoped>
.row1 {
}
.row2 {
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}
.photobutton {
  margin: 0 auto;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* box-shadow: var(--mainshow); */
}
.image {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.photo-rb {
  height: 40px;
  font-size: 15px;
  position: fixed;
  right: 10px;
  bottom: 60px;
}
.row1-row {
  text-align: center;
}
.row1-new {
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}
.row1-card {
  margin: 0 auto;
  width: 90%;
  height: 50px;
  background-color: white;
  border-radius: 25px;
  text-align: center;
  box-shadow: var(--mainshow);
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>